<template>
  <el-avatar :size="130" :src="store.userinfo.avatar" />
  <div>点击更换</div>
  <el-form :model="userInfo" :inline="true" class="demo-form-inline mt-20">
    <el-form-item label="用户名:">
      <el-input v-model="store.userinfo.name" />
    </el-form-item>
    <el-form-item label="生日:">
      <el-date-picker
        v-model="userInfo.birth"
        type="date"
        placeholder="选择日期"
        :default-value="new Date(2000, 9, 1)"
      />
    </el-form-item>
  </el-form>
  <el-form :inline="true" class="demo-form-inline mt-20">
    <el-form-item label="性别:">
      <el-radio-group v-model="userInfo.sex" size="large">
        <el-radio-button label="男" />
        <el-radio-button label="女" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="城市:">
      <el-select placeholder="北京" v-model="userInfo.city">
        <el-option
          :label="item"
          v-for="(item, index) in cityAll"
          :key="index"
          :value="index"
        />
      </el-select>
    </el-form-item>
    <el-form :inline="true" class="demo-form-inline mt-20">
      <el-form-item label="成长等级:">
        <el-button type="primary" size="small">lv.1</el-button>
      </el-form-item>
      <el-form-item label="技术水平:">
        <el-select v-model="userInfo.skill" placeholder="零基础">
          <el-option
            v-for="item in skillAll"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
            <span
              style="
                float: right;
                color: var(--el-text-color-secondary);
                font-size: 13px;
              "
              >{{ item.value }}</span
            >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :inline="true" class="demo-form-inline mt-20">
      <div class="hobby">
        兴趣技能:
        <el-tag
          v-for="tag in store.hobby.userHobby"
          :key="tag"
          class="tag"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>

        <el-button class="button-new-tag addTag" @click="showInput">
          请选择
        </el-button>
      </div>
    </el-form>
    <Hobby />
    <button type="button" class="btn" @click="save">保存</button>
  </el-form>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Edit_info",
});
</script>

<script setup lang="ts">
import { useUserInfoStore } from "@/stores/userInfo";
import { ref, nextTick, onMounted } from "vue";
import { ElInput, ElMessage } from "element-plus";
import Hobby from '@/components/Hobby/index.vue'

const store = useUserInfoStore();
const userInfo = ref({
  birth: "",
  sex: "",
  city: "",
  lv: "",
  skill: "",
});
const cityAll = ref([
  "安徽",
  "北京",
  "重庆",
  "福建",
  "甘肃",
  "广东",
  "广西",
  "贵州",
  "海南",
  "河北",
  "黑龙",
  "河南",
  "湖北",
  "湖南",
  "内蒙",
  "江苏",
  "江西",
  "吉林",
  "辽宁",
  "澳门",
  "宁夏",
  "青海",
  "陕西",
  "山东",
  "上海",
  "山西",
  "四川",
  "台湾",
  "天津",
  "西藏",
  "香港",
  "新疆",
  "云南",
  "浙江",
  "钓鱼",
  "海外",
]);
const skillAll = ref([
  { value: "零基础小白", label: "零基础" },
  { value: "业余初级", label: "0-1年学" },
  { value: "业余中级", label: "1-2年学" },
  { value: "业余高级", label: "2-4年学" },
  { value: "专业初级", label: "4-6年学" },
  { value: "专业中级", label: "6-8年学" },
  { value: "专业高级", label: "8年以上" },
]);

//保存
const save = () => {
  ElMessage({
    message: "保存成功",
    type: "success",
  });
};
//兴趣技能
const handleClose = (tag: string) => {
  store.hobby.userHobby.splice(store.hobby.userHobby.indexOf(tag), 1);
};

const showInput = () => {
  store.hobby.isShow = true;
};


</script>

<style scoped>
.mt-20 {
  margin-top: 20px;
}
.tag {
  width: 100px;
  height: 40px;
  text-align: center;
  margin-left: 10px;
  font-size: 15px;
  color: black;
  background-color: #fff;
  border: solid 0.5px #eee;
}
.addTag {
  width: 100px;
  height: 40px;
  background-color: #eee;
  margin-left: 10px;
  border: none;
}

.btn {
  width: 150px;
  height: 50px;
  text-align: center;
  color: white;
  background-color: #f93684;
  border-radius: 4px;
  border: none;
  margin-top: 60px;
}
.hobby {
  font-size: 14px;
  line-height: 50px;
  height: 50px;
  text-align: left;
  padding-left: 160px;
}
</style>
